<template>
  <div>
    <svg
      :class="{'is-active':isActive}"
      class="shuaxin"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M512 960c-60.8 0-119.4-11.5-174.3-34.1-53.3-21.7-101.2-53-142.3-92.9-41.1-39.7-73.3-86.1-96-137.8C75.9 641.7 64 584.8 64 526.3c0-58.9 11.9-115.6 35.3-168.8 22.5-51.6 54.8-97.9 96-137.8 41.1-39.7 88.9-70.9 142.3-92.9 55.2-22.7 114-34.3 174.4-34.3 77 0 153.1 19.2 220 55.7 27.4 15 53.4 32.9 76.9 53.1l9.4 8.1v-107c0-21.2 17.8-38.4 39.7-38.4 21.9 0 39.7 17.2 39.7 38.4v212.9c0 12.8-6.5 24.7-17.4 31.8h-4.1v2.3c-5.7 3-12 4.5-18.5 4.5-1.1 0-2.3 0-3.4-0.1H637.9c-21.9 0-39.7-17.2-39.7-38.4S616 277 637.9 277h138.3l-10.2-9.4c-21.9-20.2-46.5-37.9-73.2-52.4-54.9-30-117.4-45.8-180.8-45.8-98.4 0-191.1 37.1-260.6 104.5-69.6 67.3-108 157-108 252.3s38.3 185 108 252.3S413.6 883.1 512 883.1 703.1 846 772.6 778.6s108-157 108-252.3c0-21.2 17.8-38.4 39.7-38.4s39.7 17.2 39.7 38.4c0 58.9-11.9 115.6-35.3 168.8-22.5 51.6-54.8 97.9-96 137.8-41.1 39.7-88.9 70.9-142.3 92.9C631.2 948.5 572.5 960 512 960z" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'ShuaXin',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style scoped>
.shuaxin {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 18px;
}

.shuaxin.is-active {
  transform: rotate(180deg);
}
</style>
